<template>
  <div :class="type=='textarea' ? 's-textarea':'s-input'">
    <input
      v-if="type != 'textarea'"
      ref="input"
      v-bind="$attrs"
      :value="value ? value :''"
      @input="handleInput"
      @change="handleChange"
      @compositionstart="handleCompositionStart"
      @compositionupdate="handleCompositionUpdate"
      @compositionend="handleCompositionEnd"
    />
    <textarea
      v-bind="$attrs"
      v-if="type == 'textarea'"
      ref="textarea"
      :value="value ? value :''"
      @input="handleInput"
      @compositionstart="handleCompositionStart"
      @compositionupdate="handleCompositionUpdate"
      @compositionend="handleCompositionEnd"
    ></textarea>
  </div>
</template>
<script>
export default {
  name: "SInput",
  componentName: "SInput",
  inheritAttrs: false,
  props: ["type", "value"],
  data() {
    return {
      isComposing: false
    };
  },
  computed: {},
  methods: {
    handleInput(event) {
      this.$emit("input", event.target.value);
      // console.log(event)
    },
    handleChange(event) {
      this.$emit("change", event.target.value);
    },
    handleCompositionStart() {
      console.log("开始输入");
      this.isComposing = true;
    },
    handleCompositionUpdate(event) {
      let text = event.target.value;
      let lastCharacter = text[text.length - 1] || "";
      console.log("输入中----", lastCharacter);
      this.isComposing = !this.isKorean(lastCharacter);
    },
    handleCompositionEnd(event) {
      if (this.isComposing) {
        this.isComposing = false;
        this.handleInput(event);
      }
    },
    isKorean(lastCharacter) {
      const reg = /([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi;
      return reg.test(lastCharacter);
    }
  }
};
</script>
